<template>
  <div class="mv-detail">
    <!-- 左边部分  -->
    <div class="mv-wrap">
      <router-link to="/home/mv">
        <h2>
          <i class="iconfont icon-zuojiantou"></i>
          mv详情
        </h2>
      </router-link>
      <!-- 视频 -->
      <div class="video-wrap">
        <video width="90%" :poster="image" controls height="400px" :src="url">
        </video>
        <div class="info-wrap" v-if="Object.keys(mv_info).length!==0">
          <div class="singer-info">
            <img v-lazy="mv_info.info.artists[0].img1v1Url" alt="">
            <span>{{mv_info.info.artists[0].name}} /</span>
            <span class="face" v-if="mv_info.info.artists[1]">{{mv_info.info.artists[1].name}}</span>
          </div>
          <div class="mv-info">
            <h2>{{mv_info.info.name}}</h2>
          </div>
          <div class="release">
            <span>发布：{{mv_info.info.publishTime}}&nbsp;&nbsp;</span>
            <span>播放：{{mv_info.info.playCount}} 次</span>
            <p>{{mv_info.info.desc}}</p>
          </div>
          <!-- 评论区 -->
          <div class="rec">
            <!-- 精彩评论 -->
            <recommend title="精彩评论" :recommendData="recommendData.hotcomments" />
            <!-- 最新评论 -->
            <recommend title="最新评论" :recommendData="recommendData.comments" />
          </div>
        </div>
      </div>
    </div>
    <!-- 右边部分  -->
    <div class="recommend-wrap">
      <h2>
        相关推荐
      </h2>
      <div class="box-right">
        <ul>
          <li v-for="(item,index) in mv_info.connect" :key="item.id" @mouseleave="mv_bofang = false" @mouseover="mv_bofang = index" @click="handleMv(item.id)">
            <div class="item-img">
              <img v-lazy="item.cover" alt="">
              <i class="iconfont icon-bofang" v-show="mv_bofang === index"></i>
              <i class="iconfont icon-sanjiaoright"></i>
              <span class="playCount">{{item.playCount | initVolume}}</span>
            </div>
            <div class="item-desc">
              <span class="desc">{{item.name}}</span>
              <span class="author">{{item.artistName}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import Recommend from '@/components/content/Recommend'

import { getMvRecommend } from '@/api/mv'

export default {
  name: 'MvDetail',
  created() {
    this.$store.dispatch('getMvDetail', this.$route.params.id)
    this.getCommend(this.commendInfo)
  },
  data() {
    return {
      // mv视频地址
      url: null,
      // mv视频第一帧图片
      image: null,
      // 存放评论区请求数据体
      commendInfo: {
        id: this.$route.params.id
      },
      // 存放评论，区数据
      recommendData: {
        hotcomments: [],
        comments: []
      },
      // 控制播放图标是否显示
      mv_bofang: false
    }
  },
  methods: {
    async getCommend(info) {
      const { data: res } = await getMvRecommend(info.id)
      this.recommendData.hotcomments = res.hotComments
      this.recommendData.comments = res.comments
    },
    handleMv(id) {
      this.$store.dispatch('getMvDetail', id)
      this.commendInfo.id = id
      this.getCommend(this.commendInfo)
    },
    refreshLoad(val) {
      console.log(val)
      if (this.url === null && this.image === null) {
        const data = JSON.parse(window.sessionStorage.getItem('vuex'))
        console.log(data)
        this.url = data.mv_info.url
        this.image = data.mv_info.info.cover
      }
    }
  },
  computed: {
    ...mapState(['mv_info'])
  },
  watch: {
    'mv_info'(newVal) {
      console.log(newVal)
      this.url = newVal.url
      this.image = newVal.info.cover
    }
  },
  mounted() {
    // 监听浏览器刷新
    window.addEventListener('load', () => {
      this.refreshLoad(1)
    })
  },
  components: {
    Recommend
  }
}
</script>

<style lang="less" scoped>
.mv-detail {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  .mv-wrap {
    width: 55%;
    height: 100%;
    a {
      h2 {
        margin: 20px 0;
      }
    }
  }
  .video-wrap {
    .info-wrap {
      margin-top: 20px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 8px;
      }
      .face {
        margin-left: 5px;
      }
      .mv-info {
        h2 {
          padding: 15px 0;
        }
      }
      .release {
        span {
          color: #666;
          font-size: 14px;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
  }
  .recommend-wrap {
    width: 35%;
    .box-right {
      ul {
        li {
          display: flex;
          margin: 10px 0;
          .item-img {
            position: relative;
            color: #fff;
            img {
              height: 120px;
            }
            .playCount,
            .icon-sanjiaoright {
              position: absolute;
              top: 3px;
              vertical-align: middle;
            }
            .icon-sanjiaoright {
              right: 60px;
              font-size: 16px;
            }
            .playCount {
              right: 8px;
            }
            .icon-bofang {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 45px !important;
            }
          }
          .item-desc {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
            font-size: 18px;
            .author {
              color: #666;
            }
          }
        }
      }
    }
  }
}
</style>